<template>
	<view :style="style"></view>
</template>

<script>
// X              水平
// Y              垂直
// dash           虚线
// solid          实线
// color          颜色
// "dash-width"   每条虚线宽度(px)
export default {
	props: {
		dash: {
			type: Boolean,
			default: false
		},
		solid: {
			type: Boolean,
			default: true
		},
		X: {
			type: Boolean,
			default: false
		},
		Y: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#ededed'
		},
		'dash-width': {
			type: String,
			default: '3'
		}
	},
	computed: {
		style() {
			const height = this.X ? '2px' : '100%';
			const width = this.Y ? 'px' : '100%';
			let background = '#fff';
			if (this.dash) {
				background = `linear-gradient(to ${this.Y ? 'top' : 'right'}, ${this.color}, ${this.color} ${this.dashWidth / 2}px, transparent ${this.dashWidth /
					2}px, transparent);background-size: ${this.Y ? `100% ${this.dashWidth}px` : `${this.dashWidth}px 100%`}`;
			} else if (this.solid) {
				background = `${this.color}`;
			}
			return `height:${height};width:${width};background:${background}`;
		}
	}
};
</script>
